<template>
  <el-container>
    <el-main>
      <!-- 动态表格展示考试数据 -->
      <el-table
          :data="examList"
          style="width: 100%; margin-top: 20px;"
          border
          stripe
          :default-expand-all="false"
          v-loading="loading"
      >
      <!-- 可展开列 -->
      <el-table-column type="expand">
        <template #default="props">
          <div class="exam-content-wrapper">
            <h4>题目详情 (总分: {{ props.row.totalScore }})</h4>
            <!-- 遍历题目数组 content -->
            <div v-for="(question, qIndex) in props.row.content" :key="question.id" class="question-item">
              <el-card shadow="never">
                <template #header>
                  <div class="question-header">
                      <span class="question-type">
                        {{ question.type === 'single' ? '【单选题】' : '【主观题】' }}
                      </span>
                    <span class="question-score">分值: {{ question.score }}分</span>
                  </div>
                </template>

                <!-- 题干 -->
                <p class="question-content"><strong>{{ qIndex + 1 }}.</strong> {{ question.content }}</p>

                <!-- 根据题目类型动态渲染 -->
                <!-- 单选题 -->
                <div v-if="question.type === 'single'" class="options-list">
                  <el-radio-group v-model="question.correctAnswer" disabled>
                    <el-radio
                        v-for="option in question.options"
                        :key="option.text"
                        :label="option.text"
                        :class="{ 'correct-option': option.isCorrect }"
                    >
                      {{ option.text }}
                    </el-radio>
                  </el-radio-group>
                </div>

                <!-- 主观题 -->
                <div v-else class="reference-answer">
                  <p><strong>参考答案:</strong></p>
                  <el-input
                      v-model="question.referenceAnswer"
                      type="textarea"
                      :rows="2"
                      readonly
                      style="margin-top: 5px;"
                  />
                </div>
              </el-card>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column type="index" label="序号" width="100px" align="center" />
      <el-table-column prop="id" label="考试ID" width="300px"  align="center" show-overflow-tooltip />
      <el-table-column prop="name" label="考试名称" width="200px"   align="center" />
      <el-table-column prop="subject" label="科目" width="150px"  align="center" />
      <el-table-column prop="teacherName" label="教师" width="150px" align="center" />
      <el-table-column prop="totalScore" label="总分" width="150px" align="center" />
      <el-table-column prop="objectiveScore" width="150px" label="客观题得分" align="center" />
      <el-table-column prop="subjectiveScore" width="150px" label="主观题得分" align="center" />
      <el-table-column prop="createTime" label="创建时间" width="300px"  align="center" />

      <!-- 操作列 -->
      <el-table-column label="操作" width="250" align="center" fixed="right">
        <template #default="scope">
          <el-button icon="PieChart" size="small" plain type="primary" @click="studentScoreAnalysis(scope.row)">学生成绩分析</el-button>
          <el-button icon="Delete" size="small" plain type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {allTesData,deleteTes} from '../../api/tesPaper/tesPaper.ts';
import {useRouter} from 'vue-router';

const loading = ref(true);
const router = useRouter();

const examList = ref<any[]>([]);

onMounted(async () => {
  await allTesData().then(res =>  {
    examList.value = res.data
  }).catch(e => {
    ElMessage.error(e.message)
  })
  examList.value.forEach(exam => {
    exam.content.forEach(question => {
      if (question.type === 'single') {
        // 找到正确答案的文本，并赋值给一个新属性
        const correctOption = question.options.find((opt: any) => opt.isCorrect);
        if (correctOption) {
          question.correctAnswer = correctOption.text;
        }
      }
    });
  });
  loading.value = false;
});

const handleDelete = (row: any) => {
  console.log('删除考试:', row);
  ElMessageBox.confirm(
      `确定要删除考试 "${row.name}" 吗?`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deleteTes([row.id]).then(_ => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      });
    }).catch(e => {
      ElMessage.error(e.message)
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    });
  });
};


const studentScoreAnalysis = (row: any) => {
  console.log('查看考试成绩:', row);
  router.push( {
    path: '/main/studentPerformanceAnalysis',
    query: {
      id: row.id
    }
  })
};

</script>

<style scoped lang="scss">
.el-header {
  padding: 20px;
}

// 题目详情展开区域的样式
.exam-content-wrapper {
  padding: 10px 20px;
  background-color: #fafafa;
  border-radius: 4px;

  h4 {
    margin: 0 0 15px 0;
    color: #409eff;
  }
}

.question-item {
  margin-bottom: 15px;
  .el-card {
    border: 1px solid #ebeef5;
  }
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .question-type {
    font-weight: bold;
    color: #606266;
  }
  .question-score {
    color: #e6a23c;
    font-weight: bold;
  }
}

.question-content {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.options-list {
  .el-radio {
    display: block;
    margin-bottom: 10px;
    margin-left: 20px; // 缩进选项
    &.correct-option {
      color: #67c23a; // 正确答案用绿色高亮
      font-weight: bold;
    }
  }
}

.reference-answer {
  margin-top: 10px;
  p {
    margin: 0;
  }
}
</style>
